<div id="no-response-panel" class="card">
  <div class="card-header bg-secondary text-white cursor-pointer border-0" (click)="toggleTab()">
    <div class="d-flex w-100 flex-fill flex-md-row flex-column align-items-md-center align-items-start">
      <div class="text-start">
        Participants who have not responded to any question
      </div>
      <div class="card-header-btn-toolbar ms-0 ms-md-auto align-self-md-end">
        <a *ngIf="session.submissionStatus === FeedbackSessionSubmissionStatus.OPEN; else extendDeadlineBtn"
            tmRouterLink="/web/instructor/sessions/individual-extension"
            [queryParams]="{ courseid: session.courseId, fsname: session.feedbackSessionName, preselectnonsubmitters: true }">
          <ng-container *ngTemplateOutlet="extendDeadlineBtn"></ng-container>
        </a>
        <ng-template #extendDeadlineBtn>
          <button type="button" class="btn btn-secondary btn-sm button"
                  [disabled]="session.submissionStatus !== FeedbackSessionSubmissionStatus.OPEN">
            Extend Deadline for All
          </button>
        </ng-template>
        <button id="btn-remind-all" class="btn btn-secondary btn-sm button" type="button" (click)="!isDisplayOnly && openSendReminderModal($event); $event.stopPropagation();"
            [disabled]="session.submissionStatus !== FeedbackSessionSubmissionStatus.OPEN">
          Remind All
        </button>
      </div>
    </div>
    <div class="chevron-collapse">
      <tm-panel-chevron [isExpanded]="isTabExpanded"></tm-panel-chevron>
    </div>
  </div>
  <div *ngIf="isTabExpanded" @collapseAnim>
    <div *tmIsLoading="!isNoResponseStudentsLoaded" class="card-body">
      <div *ngIf="noResponseStudentsInSection.length">
        <table id="no-response-table" class="table table-striped">
          <thead>
          <tr>
            <th class="cursor-pointer" (click)="sortParticipantsBy(SortBy.TEAM_NAME)">
              Team
              <span class="fa-stack"><i class="fas fa-sort"></i>
                <i *ngIf="sortBy === SortBy.TEAM_NAME && sortOrder === SortOrder.DESC" class="fas fa-sort-down"></i>
                <i *ngIf="sortBy === SortBy.TEAM_NAME && sortOrder === SortOrder.ASC" class="fas fa-sort-up"></i>
              </span>
            </th>
            <th id="sort-by-name" class="cursor-pointer" (click)="sortParticipantsBy(SortBy.RESPONDENT_NAME)">
              Name
              <span class="fa-stack"><i class="fas fa-sort"></i>
                <i *ngIf="sortBy === SortBy.RESPONDENT_NAME && sortOrder === SortOrder.DESC" class="fas fa-sort-down"></i>
                <i *ngIf="sortBy === SortBy.RESPONDENT_NAME && sortOrder === SortOrder.ASC" class="fas fa-sort-up"></i>
              </span>
            </th>
            <th>Actions</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let noResponseStudent of noResponseStudentsInSection">
            <td>{{ noResponseStudent.teamName }}</td>
            <td>{{ noResponseStudent.name }} ({{noResponseStudent.email}})</td>
            <td>
              <a *ngIf="!isDisplayOnly; else displayOnlySubmitResponseButton" tmRouterLink="/web/sessions/submission" rel="noopener noreferrer" target="_blank"
                [queryParams]="{courseid: session.courseId, fsname: session.feedbackSessionName, moderatedperson: noResponseStudent.email}"
                class="btn btn-light btn-sm button">
                Submit responses
              </a>
              <ng-template #displayOnlySubmitResponseButton><a class="btn btn-light btn-sm button">Submit response</a></ng-template>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div *ngIf="!noResponseStudentsInSection.length">
        <i>All students have responded to some questions in this session.</i>
      </div>
    </div>
  </div>
</div>
